<!-- 
    默认尺寸大小
    emit(changeSize)改变全局的尺寸大小的子传父事件
 -->
<template>
    <div class="size-change">
        <el-dropdown @command="handleCommand">
            <span>
                <i class="iconfont icon-text-size txt"></i>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item :icon="CaretRight" command="large"
                        :disabled="size == 'large'">超大</el-dropdown-item>
                    <el-dropdown-item :icon="CaretRight" command="default"
                        :disabled="size == 'default'">默认</el-dropdown-item>
                    <el-dropdown-item :icon="CaretRight" command="small"
                        :disabled="size == 'small'">较小</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { ElMessage } from 'element-plus'//消息提示
import { CaretRight } from '@element-plus/icons-vue';//图标 
const size = ref('default')//默认尺寸大小
// 自定义事件
const emit = defineEmits<{ (e: 'changeSize', size: string): void }>()
// 触发显示下拉菜单的回调事件
const handleCommand = (e: string) => {
    // e:点击菜单项触发的参数
    size.value = e
    localStorage.setItem('size', e)//赋值并在本地存储
    emit('changeSize', e)
    ElMessage.success('设置成功')
}
</script>
<style lang="less" scoped>
.size-change {
    display: inline-block;

    i {
        cursor: pointer;
        font-size: 30px;
        margin: 0px 10px;
    }
}
</style>